import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Arrow, Manager, ArrowLeft, Photograph } from "@react-vant/icons";
import axios from "../uilst/axios";

type Props = {};

const Addpeople = (props: Props) => {
  const navigate = useNavigate();
  const username = localStorage.getItem("username");
  const [teg, setteg] = useState("成人票");
  const [name, setname] = useState("");
  const [carid, setcarid] = useState("");
  const [tel, settel] = useState("");

  const add = () => {
    axios.post("/addpeople", {
      data : {
        id: Math.random().toString().slice(-2),
        teg: teg,
        name: name,
        carid: carid,
        tel: tel,
      }
    });
    navigate("/passengerList");
  };
  return (
    <div className="addpeoplebox">
      <div className="top">
        <div className="icon">
          <ArrowLeft
            fontSize="20px"
            onClick={() => {
              navigate(-1);
            }}
          />
        </div>
        <div className="title">新增乘客</div>
      </div>
      <div className="loginbox">
        <div className="pic">
          <div className="img">
            <Manager fontSize="25px" color="#1ba9ba" />
          </div>
          <div className="name">{username}</div>
        </div>
        <div className="change">
          切换账号
          <Arrow fontSize="14px" />
        </div>
      </div>
      <div className="addbtn">
        <Photograph fontSize="15px" />
        扫描证件添加
      </div>
      <div className="content">
        <div className="contentbox">
          <div className="box">
            <span>乘客类型</span>
            <input
              type="text"
              value={teg}
              onChange={(e) => setteg(e.target.value)}
              className="inp1"
            />
          </div>
          <div className="box">
            <span>姓名&emsp;&emsp;</span>
            <input
              type="text"
              placeholder="与乘客姓名保持一致"
              value={name}
              onChange={(e) => setname(e.target.value)}
            />
          </div>
          <div className="box">
            <span>证件类型</span>
            <span className="b1">身份证</span>
          </div>
          <div className="box">
            <span>证件号码</span>
            <input
              type="text"
              placeholder="与乘客号码保持一致"
              value={carid}
              onChange={(e) => setcarid(e.target.value)}
            />
          </div>
          <div className="box">
            <span>手机号码</span>
            <input
              type="text"
              placeholder="请准确填写手机号"
              value={tel}
              onChange={(e) => settel(e.target.value)}
            />
          </div>
          <div className="tipbox">
            为配合疫情防控工作，需提供每名乘客的
            <span className="or1">本人手机号</span>
            老人或无手机号的乘客，可填写亲友手机号
          </div>
        </div>
      </div>
      <div className="tips">本次购票服务由八维购票提供</div>
      <div className="surebtn" onClick={add}>
        确定
      </div>
    </div>
  );
};

export default Addpeople;